[css-properties-values-api-1] Allow scoped @property rules

There currently is no way to define @property-Rules on a non global level. When people want to leverage the syntax especially in combination with | this will be handy e.g.:

.card {
  @property --size {
    syntax: "default | big";
    inherits: false;
    initial-value: default;
  }
}

.button {
  @property --size {
    syntax: "small | default";
    inherits: false;
    initial-value: default;
  }
}

The current implementation would lead to all custom properties being globally scoped and therefore the need of unique names e.g:

@property --card-size {
  syntax: "default | big";
  inherits: false;
  initial-value: default;
}

@property --button-size {
  syntax: "small | default";
  inherits: false;
  initial-value: default;
}

This can quickly get out of hand and become chaotic.

This feature will become even more useful when Style Queries grow in adoption. Because people can leverage these two features together especially in a component based development context. That way it it's possible to remove style linked / visual properties and class toggles on various elements.

For example a card component like this (no Enum etc. just for demo purposes)

type TCard = {
  isBig: boolean;
  theme: 'primary' | 'secondary';
}

function Card({
  isBig = false,
  theme = 'primary'
}) {
  ....
}

could be easily migrated to:

.card {
  container: card / normal;

  @property --isBig {
    syntax: "true | false";
    inherits: true;
    initial-value: false;
  }

  @property --theme {
    syntax: "primary | secondary";
    inherits: true;
    initial-value: primary;
  }
}

.text {
  @container style(--isBig: true) {
    font-size: 5rem;
  }

  @container style(--theme: primary) {
    color: green;
  }
}

This could of course would be even more useful when multiple styles on multiple elements are changed.

With this being possible I could one could define a typed visiual "API" purely in CSS. I also see potential for tooling here.

Start with the CSS Properties and Values API Level 1 context and the scoped @property examples in this issue. Define the intended scoping behavior, including how it interacts with style queries, and capture the agreed behavior in the specification.