mirror of https://github.com/affaan-m/ECC.git synced 2026-09-30 21:45:13 +02:00

Files

T

Affaan MustafaandGitHub c70874fae9 feat(pi): curated pi/core skills+prompts profile, CI load test, and 2.2.2 release sync (#3264 )

Adds a curated, Pi-native, skills+prompts-only profile at pi/core/ for downstream packagers that mirror GitHub Releases.

- manifests/pi-core.json: explicit include lists, per-item exclusion reasons, curation rules, safety allowlists; every root skill and command must be classified.
- scripts/build-pi-core.js regenerates pi/core deterministically (package.json from VERSION, LICENSE, README.md, CURATION.md, skills/, commands/); --check fails CI on drift. council is renamed ecc-council inside pi/core only.
- Safety checks: no callable endpoints outside the allowlist, no npx/curl|sh/pip install, no secrets, no absolute home paths, no symlinks, valid frontmatter, no duplicate names.
- CI: build + drift check and an offline Pi CLI load test of pi/core.
- Release: VERSION, package.json and pi/core/package.json at 2.2.2, CHANGELOG, tag-triggered release verification, and a two-week cadence in CONTRIBUTING.md.

pi/core: 123 of 293 skills and 24 of 94 commands; 35,006 characters of skill description text.

2026-09-29 20:24:05 -05:00

2.5 KiB

Raw Blame History

Component Styling

Angular components can define styles that apply specifically to their template, enabling encapsulation and modularity.

Defining Styles

Styles can be defined inline or in separate files.

@Component({
  selector: 'app-photo',
  // Inline styles
  styles: `
    img {
      border-radius: 50%;
    }
  `,
  // OR external file
  styleUrl: 'photo.component.css',
})
export class Photo {}

View Encapsulation

Every component has a view encapsulation setting that determines how styles are scoped.

Mode	Behavior
`Emulated` (Default)	Scopes styles to the component using unique HTML attributes. Global styles can still leak in.
`ShadowDom`	Uses the browser's native Shadow DOM API to isolate styles completely.
`None`	Disables encapsulation. Component styles become global.
`ExperimentalIsolatedShadowDom`	Strictly guarantees that only the component's styles apply.

Usage

import { ViewEncapsulation } from '@angular/core';

@Component({
  ...,
  encapsulation: ViewEncapsulation.None,
})
export class GlobalStyled {}

Special Selectors

`:host`

Targets the component's host element (the element matching the component's selector).

:host {
  display: block;
  border: 1px solid black;
}

`:host-context()`

Targets the host element based on some condition in its ancestry.

/* Apply styles if any ancestor has the 'theme-dark' class */
:host-context(.theme-dark) {
  background-color: #333;
}

`::ng-deep`

Disables view encapsulation for a specific rule, allowing it to "leak" into child components. Note: The Angular team strongly discourages the use of ::ng-deep. It is supported only for backwards compatibility.

Styles in Templates

You can use <style> elements directly in a component's template. View encapsulation rules still apply.

<style>
  .dynamic-class {
    color: red;
  }
</style>
<div class="dynamic-class">Hello</div>

External Styles

Using <link> or @import in CSS is treated as external styles. External styles are not affected by emulated view encapsulation.

2.5 KiB Raw Blame History